<template>
	<view v-if="userStore.userInfo.type == 1" class="page group-edit">
		<nav-bar back>创建群聊<button class="confirm" @click="submit()">完成</button></nav-bar>
		<view :is-shadow="false" is-full :border="false" class="main">
			<uni-forms ref="form" :modelValue="group" :rules="rules" validate-trigger="bind" label-position="top"
				label-width="100%">
				<view class="item-avatar">
					<text>群头像</text>
					<uni-forms-item name="headImage" class="avatar">
						<image-upload v-if="isOwner" :onSuccess="onUnloadImageSuccess">
							<image :src="group.headImageThumb?group.headImageThumb:'/static/image/pic.jpg'"
								style="width: 70rpx;height: 70rpx;border-radius: 5rpx;" class="group-image">
							</image>
						</image-upload>
						<image v-else :src="group.headImageThumb?group.headImageThumb:'/static/image/pic.jpg'"
							style="width: 70rpx;height: 70rpx;border-radius: 5rpx;" class="group-image">
						</image>
					</uni-forms-item>
				</view>
				<div style="height: 1rpx;background-color: #f7f7f7;"></div>
				<view class="item">
					<text>群名称</text>
					<input v-model="group.name" type="text" placeholder="请输入群聊名称" />
				</view>
				<div style="height: 1rpx;background-color: #f7f7f7;"></div>
				<view class="item">
					<text>群备注</text>
					<input v-model="group.remarkGroupName" type="text" placeholder="请输入群聊备注" />
				</view>
				<div style="height: 1rpx;background-color: #f7f7f7;"></div>
				<view class="item">
					<text>群昵称</text>
					<input v-model="group.remarkNickName" type="text" placeholder="请输入群聊昵称" />
				</view>
				<div style="height: 1rpx;background-color: #f7f7f7;"></div>
				<!-- <view name="notice" class="notice">
					<uni-easyinput class="area-input" :inputBorder="false" type="textarea" v-model="group.notice"
						:disabled="!isOwner" placeholder="群公告" />
				</view> -->
			</uni-forms>
			<!-- <button class="bottom-btn" type="primary" @click="submit()">提交</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				group: {},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入群聊名称',
						}]
					}

				}
			}
		},

		methods: {
			submit() {
				if (this.group.id) {
					this.modifyGroup();
				} else {
					this.createNewGroup();
				}
			},
			onUnloadImageSuccess(file, res) {
				this.group.headImage = res.data.originUrl;
				this.group.headImageThumb = res.data.thumbUrl;
			},
			modifyGroup() {
				this.$http({
					url: "/group/modify",
					method: "PUT",
					data: this.group
				}).then((group) => {
					this.groupStore.updateGroup(group);
					uni.showToast({
						title: "修改群聊信息成功",
						icon: 'none'
					});
					setTimeout(() => {
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.loadGroupInfo();
						uni.navigateBack();
					}, 1000);

				})
			},
			createNewGroup() {
				this.$http({
					url: "/group/create",
					method: 'POST',
					data: this.group
				}).then((group) => {
					this.groupStore.addGroup(group);
					uni.showToast({
						title: `群聊创建成功，快邀请小伙伴进群吧`,
						icon: 'none',
						duration: 1500
					});
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/group/group-info?id=" + group.id
						});
					}, 1500)

				})
			},
			loadGroupInfo(id) {
				this.$http({
					url: `/group/find/${id}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
					// 更新聊天页面的群聊信息
					this.chatStore.updateChatFromGroup(group);
					// 更新聊天列表的群聊信息
					this.groupStore.updateGroup(group);

				});
			},
			initNewGroup() {
				let userInfo = this.userStore.userInfo;
				this.group = {
					name: `${userInfo.userName}创建的群聊`,
					headImage: userInfo.headImage,
					headImageThumb: userInfo.headImageThumb,
					ownerId: this.userStore.userInfo.id
				}
			}
		},
		computed: {
			isOwner() {
				return this.userStore.userInfo.id == this.group.ownerId
			}
		},
		onLoad(options) {
			if (options.id) {
				// 修改群聊
				this.loadGroupInfo(options.id);
			} else {
				// 创建群聊
				this.initNewGroup();
			}

		}
	}
</script>

<style lang="scss" scoped>
	.group-edit {
		// background-color: #fff;
		.title {
			button {
				position: absolute;
				color: #fff;
				background-color: #07c160;
				right: 20rpx;
				bottom: 10rpx;
				padding: 0;
				font-size: 30rpx !important;
				width: 120rpx;
				line-height: 60rpx;
			}
		}

		.main {
			.item-avatar {
				position: relative;
				background-color: #fff;
				padding: 30rpx 40rpx;

				.avatar {
					position: absolute;
					top: -55rpx;
					right: 40rpx;
				}
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 40rpx;
				flex-wrap: nowrap;
				background-color: #fff;
				text-align: right;


				view:last-child {
					width: 500rpx;
				}

				.group-image {
					width: 100rpx;
					height: 100rpx;
				}

				.uni-data-checklist {
					flex: 0;
				}

			}

			.item:first-child {
				padding: 0rpx 30rpx;
			}

			.notice {
				.area-input {
					::v-deep .uni-easyinput__content {
						border-radius: 10rpx;
						padding: 0 30rpx;
					}
				}
			}


			.bottom-btn {
				width: 30%;
				margin: 20rpx auto;
			}
		}
	}
</style>